<template>
  <div class="box">
    <el-container class="container">
      <el-header style="height: 45px">
        <section class="header_logo">
          <div class="logoName">校友录</div>
        </section>
        <section class="header_avatar">
          <el-popover
            placement="bottom"
            trigger="hover"
          >
            <div class="logout" @click="logout">登出</div>
            <i slot="reference" class="el-icon-user-solid"></i>
          </el-popover>
        </section>
      </el-header>
      <el-container>
        <el-aside width="185px">
          <el-menu
            text-color="#ffffff"
            background-color="#304156"
            :default-active="$route.path"
            active-text-color="#409EFF"
            router
          >
            <el-menu-item
              v-for="(item, index) in rolesRoute"
              :key="index"
              :index="item.path"
            >
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="homeMain">
          <div class="content">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { rolesRoute } from '@/utils/roleRoute'
export default {
  computed: {
    rolesRoute() {
      let role = window.localStorage.getItem('role')
      return role === 'admin' ? rolesRoute.admin : rolesRoute.user
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    logout() {
      window.localStorage.removeItem('token')
      window.localStorage.removeItem('roleInfo')
      this.$router.push({
        path: '/login'
      })
    }
  },
};
</script>

<style scoped lang="less">
.box {
  height: 100%;
}
::v-deep .container {
  height: 100%;
}
::v-deep .el-container {
  background: #f3f4f9;
}
::v-deep .el-menu-item-group__title {
  padding: 0;
}
::v-deep .homeMain {
  background: #f5f5f5;
  overflow: auto;
  height: calc(100vh - 45px);
  overflow-x: hidden;
  padding: 10px;
  /*padding-right: 5px !important;*/
  .content {
    background: #f5f5f5;
    min-height: 100%;
  }
}

::v-deep .el-header {
  background-color: #2b2f3a;
  color: #fff;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.header_logo .logoName {
  color: #fff;
  margin-left: 55px;
  font-weight: 700;
}
.header_avatar {
  cursor: pointer;
}

/deep/ .el-menu {
  border-right: 0;
  text-align: left;
}

::v-deep .el-aside {
  background-color: #304156;
  color: #ffffff;
  height: 100%;
}
.logout {
  text-align: center;
  cursor: pointer;
}
</style>